<template>

	<view class="my-component">
		<!-- 	//模态框 -->
		<u-action-sheet @close="close" :closeOnClickOverlay="true" :closeOnClickAction="true" :show="show5">
			<view style="display: flex; flex-direction: column; ">
				<view>
					<view style="width:  99%; height: 3%; margin: 3px; font-size: 24px;">
						{{params.month}}月奖金详情
					</view>
				</view>
				<view>
					<view style="width: 20%; height: 3%; font-weight: bold; margin: 3px;">
						总计 :</view>
				</view>
				<view style="display: flex; flex-direction: row; ">
					<view style="width: 49%; height: 7%; color: seagreen; font-weight: bold; margin: 3px 5px 3px 3px;">
						完成项目数: {{currentMonthCompleteNum}}</view>
					<view id="currentMonthBonus"
						style="width:  49%; height:7%; color: crimson; font-weight: bold; margin: 3px 5px 3px 10px; border: 1px;">
						总奖金: {{currentMonthBonus}}</view>

				</view>
			</view>
			<view class="uni-container">
				<uni-table :loading="loading" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center">项目名</uni-th>
						<uni-th align="center">完成时间</uni-th>
						<uni-th align="center">金额</uni-th>

					</uni-tr>
					<uni-tr v-for="(item, index) in tablemonthData" :key="index">
						<uni-td width="150" align="center">
							<view>
								{{item.user.name}}
							</view>
						</uni-td>
						<uni-td width="150" align="center">
							<view>
								{{item.user.createTime}}
							</view>
						</uni-td>
						<uni-td width="150" align="center">
							<view>
								{{item.participationProjectData.unCompleteNum}}
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</u-action-sheet>
		<uni-section title="部门选择" type="line">
			<view class="uni-ma-4 my-btn">
				<u-button type="primary" size="mini" @click="openDepart()">选择部门</u-button>
			</view>

			<uni-collapse>
				<uni-collapse-item title="项目进度列表" :show-animation="true" :open="true">
					<view class="uni-ma-3 flex-container">
						<uni-easyinput :clearabled="true" prefixIcon="search" v-model="searchValue" placeholder="请输入姓名"
							@iconClick="searchName">

						</uni-easyinput>
						<view style="margin:3px">
							<!-- <uni-datetime-picker mode="date" v-model="params.month" type="month" format="YYYY-MM"
								value-format="YYYY-MM" @change="handleDateChange" /> -->
							<!-- <view>
								<BiaofunDatetimePicker ref="yearRef" fields="year" :placeholder="tsYear"
									:defaultValue="startYear" @change="changeYear"></BiaofunDatetimePicker>
							</view> -->
							<view class="mycss-flex-around-clumncenter-nowarp white-background-color uni-pa-3 "
								style="border: 1px solid #dcdfe6 ; border-radius: 3px;">
								<BiaofunDatetimePicker v-model="params.month" fields="month" :placeholder="tsMonth"
									:defaultValue="startMonth" @change="handleDateChange">
								</BiaofunDatetimePicker>
							</view>
						</view>
					</view>
					<view class="uni-container">
						<uni-table :loading="loading" border stripe emptyText="暂无更多数据">
							<uni-tr>
								<uni-th align="center">用户名</uni-th>
								<uni-th align="center">账号</uni-th>
								<uni-th align="center">未完成项目数</uni-th>
								<uni-th align="center">当月完成项目数</uni-th>
								<uni-th align="center">当月应发项目奖金</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in tableData" :key="index">
								<uni-td width="150" align="center">
									<view>
										{{item.user.name}}
									</view>
								</uni-td>
								<uni-td width="150" align="center">
									<view>
										{{item.user.account}}
									</view>
								</uni-td>
								<uni-td width="150" align="center">
									<view>
										{{item.participationProjectData.unCompleteNum}}
									</view>
								</uni-td>
								<uni-td width="150" align="center">
									<view>
										{{item.participationProjectData.currentMonthCompleteNum}}
									</view>
								</uni-td>
								<uni-td width="200" align="center">
									<view @click="showActionSheet(item)" style="color: skyblue;">
										{{item.participationProjectData.currentMonthBonus}}
									</view>
								</uni-td>
							</uni-tr>
						</uni-table>
						<view class="uni-mb-5 uni-mt-5">
							<uni-pagination :total="total" :pageSize="params.size" prev-text="前一页" next-text="后一页"
								@change="doChangePage" />
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-section>
		<view>
			<uni-drawer ref="showRight" mode="right" :mask-click="false">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="uni-ma-3">
							<button type="warn" size="mini" @click="closeDrawer('showRight')">关闭</button>
						</view>
						<view class="info-content">
							<DaTree ref="DaTreeRef" :data="roomTreeData" labelField="name" valueField="id"
								defaultExpandAll showCheckbox @change="handleTreeChange"></DaTree>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
	</view>

</template>
<script setup>
	import {
		formatDate
	} from '@/utils/dateUtil.js'
	import {
		ref,
		onMounted,
		reactive,
		inject
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import http from '@/utils/http.js'
	import DaTree from '@/components/da-tree/index.vue'
	import BiaofunDatetimePicker from "@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue"
	import {
		logError
	} from '../../components/da-tree/utils';

	const tableData = ref([]);
	const tablemonthData = ref([]);
	const roomTreeData = ref([]);
	const showRight = ref();
	const tsMonth = ref("请输入年月")
	const show3 = ref(false);
	const show5 = ref(false);

	const params = ref({
		month: formatDate(new Date(), 'yyyy-MM'),
		page: 1,
		size: 10
	})
	const currentMonthBonus = ref();
	const currentMonthCompleteNum = ref();
	const total = ref(0);
	const searchValue = ref();
	const loading = ref(false);
	const allsubmitkeys = ref([]);
	const leaveWords = ref();

	onMounted(() => {
		console.log(showRight.value);

	})
	onLoad(() => {
		loading.value = true;
		http.post("/projectPlan/statisticalByUser", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;

			}

		}).catch((re) => {
			loading.value = false;
		});
	})
	//日历查询后刷新表格数据
	function handleDateChange(newValue) {
		loading.value = true;
		params.value.month = newValue.f6;
		console.log("------重新赋值的时间-", params.value.month)
		http.post("/projectPlan/statisticalByUser", params.value).then((res) => {
			console.log("请求的时间", params.value.month);
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});


	}
	//以姓名查找
	function searchName() {
		loading.value = true;
		params.value.name = searchValue.value;
		console.log("-----------------", searchValue.value);
		http.post("/projectPlan/statisticalByUser", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}
	//显示ActionSheet
	function showActionSheet(items) {
		show5.value = !show5.value
		// getProjectBonusByMonth

		currentMonthBonus.value = items.participationProjectData.currentMonthBonus;
		currentMonthCompleteNum.value = items.participationProjectData.currentMonthCompleteNum
		console.log('当前月的奖金1:', currentMonthBonus.value);
		http.post("/projectPlan/getProjectBonusByMonth", params.value).then((res) => {
			console.log("请求的时间", params.value.month);
			console.log("数据", res);
			console.log("主页表格数据", tableData);
			if (res && res.data && res.data.code == 1) {
				tablemonthData.value = res.data.rows;
				total.value = res.data.total;
			}
			console.log("月份数据", tablemonthData.value);
		}).catch((re) => {
			loading.value = false;
		});
		console.log('ActionSheet', items);
	}
	//打开
	function open() {
		show3.value = true
		// getData();
		onLoad();
	}
	//关闭
	function close() {
		show3.value = false
		show5.value = false
	}
	//分页
	function doChangePage(e) {
		loading.value = true;
		params.value.page = e.current;
		http.post("/projectPlan/statisticalByUser", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}



	// 选择部门树型结构显示
	function openDepart() {
		showRight.value.open();
		http.post("/depart/getAll").then((res) => {
			if (res && res.data && res.data.code == 1) {
				roomTreeData.value = res.data.data;
			}
		}).catch((re) => {
			console.log(re)
		});
	}
	// 关闭部门选择
	function closeDrawer() {
		loading.value = true;
		showRight.value.close();
		params.value.id = allsubmitkeys.value.join(",")
		http.post("/projectPlan/statisticalByUser", params.value).then((res) => {
			console.log('发送请求成功！！！');
			if (res && res.data && res.data.code == 1) {
				console.log('接收数据成功！！！');
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}
	//判断勾选数据
	function handleTreeChange(allSelectedKeys, currentItem) {
		allsubmitkeys.value = allSelectedKeys;
		console.log('handleTreeChange ==>', allSelectedKeys)
	}
</script>

<style>
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
	}

	.my-component {
		background-color: white;
		height: 100%;
	}

	.my-btn {
		width: 180rpx;
	}
</style>